<template>
    <a-cascader
        v-model='cityValue'
        :options="options"
        :load-data="loadData"
        :field-names="{ label: 'name', value: 'code', children: 'children' }"
        :change-on-select='chooseEvery'
        :placeholder='placeholder'
        @change='onChange'
        :disabled='disabled'
    />
</template>

<script>
export default {
    name: 'CityCascader',
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: {
            required: true,
            type: String
        },
        placeholder: {
            type: String,
            default: '省市区镇'
        },
        // 是否能选任意一级
        chooseEvery: {
            type: Boolean,
            default: true
        },
        // 最大层级
        maxLevel: {
            type: Number,
            default: 4
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            cityValue: [],
            // 初始选项省
            options: [],
            valueCode: {
                province: '',
                city: '',
                area: '',
                town: '',
                village: ''
            }
        }
    },
    watch: {
        value: {
            immediate: true,
            handler (value) {
                if (value) {
                    if (value.length === 6) {
                        // 选到省市区
                        const province = value.substring(0, 2)
                        const city = value.substring(2, 4)
                        const area = value.substring(4, 6)
                        this.valueCode = {
                            province: province + '0000',
                            city: city === '00' ? '' : province + city + '00',
                            area: area === '00' ? '' : province + city + area,
                            town: '',
                            village: ''
                        }
                    } else if (value.length === 12) {
                        // 选到镇村
                        this.valueCode = {
                            province: value.substring(0, 2) + '0000',
                            city: value.substring(0, 4) + '00',
                            area: value.substring(0, 6),
                            town: value.length === 12 ? value : value.substring(0, 12),
                            village: value.length === 16 ? value : ''
                        }
                    }
                    setTimeout(() => {
                        this.getDefault()
                    })
                }
            }
        }
    },
    created () {
        this.getList()
    },
    mounted () {

    },
    methods: {
        async getList (code) {
            let options = []
            const res = await this.$ApiServer.getGovList({
                code
            })
            if (res.code === 200) {
                options = res.data
                options.forEach((item) => {
                    item.isLeaf = item.tier === this.maxLevel
                })
                if (!code) {
                    let obj = {}
                    options.forEach((item, index) => {
                        if (item.code === '510000') {
                            obj = item
                            options.splice(index, 1)
                        }
                    })
                    options.unshift(obj)
                }
            }
            if (!code) this.options = options
            return options
        },
        loadData (selectedOptions) {
            const targetOption = selectedOptions[selectedOptions.length - 1]
            targetOption.loading = true
            setTimeout(async () => {
                targetOption.loading = false
                targetOption.children = await this.getList(selectedOptions[selectedOptions.length - 1].code)
                this.options = [...this.options]
            }, 0)
        },
        onChange (value) {
            if (value && value.length) {
                this.$emit('change', value[value.length - 1])
            } else {
                this.$emit('change', '')
            }
        },
        async getDefault () {
            const { province, city, area, town, village } = this.valueCode
            const arr = [province, city, area, town, village]
            let arrIndex = 0
            const getItem = async (list) => {
                for (let i = 0; i < list.length; i++) {
                    if (list[i].code === arr[arrIndex]) {
                        if (!list[i].children) {
                            list[i].children = await this.getList(arr[arrIndex])
                        }
                        arrIndex++
                        if (arr[arrIndex + 1]) {
                            getItem(list[i].children)
                        } else {
                            this.getValue()
                        }
                    }
                }
            }
            if (city) {
                if (!this.options.length) {
                    await this.getList()
                }
                getItem(this.options)
            } else {
                this.getValue()
            }
        },
        getValue () {
            const { province, city, area, town, village } = this.valueCode
            this.cityValue = [province, city, area, town, village].filter(item => item)
        }
    }
}
</script>

<style scoped>

</style>
